<template>
  <div 
    v-if="show"
    :class="['status-indicator', {
      'status-indicator--fullscreen': fullscreen,
      'status-indicator--loading': type === 'loading',
      'status-indicator--empty': type === 'empty'
    }]"
  >
    <component
      :is="getIconComponent()"
      :size="iconSize"
      class="status-indicator__icon"
      :class="{
        'status-indicator__icon--spin': type === 'loading'
      }"
    />
    <p class="status-indicator__text">
      {{ description }}
    </p>
    <div v-if="$slots.default" class="status-indicator__extra">
      <slot />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { Loading, Empty, Failure } from '@nutui/icons-vue-taro'

interface Props {
  // 状态类型：loading | empty | error
  type?: 'loading' | 'empty' | 'error'
  // 是否显示
  show?: boolean
  // 是否全屏
  fullscreen?: boolean
  // 图标大小
  iconSize?: string | number
  // 描述文本
  description?: string
  // 自定义图标名称
  iconName?: string
}

const props = withDefaults(defineProps<Props>(), {
  type: 'loading',
  show: true,
  fullscreen: false,
  iconSize: '40px',
  description: '',
  iconName: ''
})

const statusConfig = {
  loading: {
    defaultIcon: 'loading',
    defaultText: '加载中...'
  },
  empty: {
    defaultIcon: 'empty',
    defaultText: '暂无数据'
  },
  error: {
    defaultIcon: 'failure',
    defaultText: '加载失败'
  }
}

const currentStatus = computed(() => ({
  icon: props.iconName || statusConfig[props.type].defaultIcon,
  text: props.description || statusConfig[props.type].defaultText
}))

// 获取图标组件
const getIconComponent = () => {
  if (props.iconName) {
    // 如果有自定义图标名称，这里需要处理
    return 'div'
  }
  
  const iconMap = {
    'loading': Loading,
    'empty': Empty,
    'failure': Failure
  }
  
  return iconMap[props.type] || 'div'
}
</script>

<style lang="scss" scoped>
.status-indicator {
  @include flex(column, center, center);
  padding: var(--status-indicator-padding, 40px 0);

  &--fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--status-indicator-bg, rgba(255, 255, 255, 0.9));
    z-index: 9999;
  }

  &__icon {
    color: var(--status-indicator-icon-color, var(--nut-gray-6));

    &--spin {
      animation: rotate 1s linear infinite;
    }
  }

  &__text {
    margin-top: var(--status-indicator-text-margin, 16px);
    color: var(--status-indicator-text-color, var(--nut-gray-7));
    font-size: var(--status-indicator-text-size, 14px);
    line-height: 1.5;
    text-align: center;
  }

  &__extra {
    margin-top: var(--status-indicator-extra-margin, 24px);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>